<template>
  <el-dialog
    ref="ref-dialog"
    :visible.sync="visible"
    :title="title"
    v-bind="dialogProps"
    v-on="dialogEvents"
  >
    <el-scrollbar
      :style="scrollbarStyle"
      class="scroll-container"
    >
      <el-form-package
        ref="ref-form"
        :c-m="formCM"
        :linkage="formLinkage"
        :reset-to="formResetTo"
        :loading="formLoading"
        @input="handleFormInput($event)"
      />
    </el-scrollbar>
    <tg-control-bar
      v-if="hasControlBar"
      :left-items="controlBarLeftItems"
      :right-items="controlBarRightItems"
    />
  </el-dialog>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgForm]
  dialogCM: ComponentModel  对话框组件模型
ref 列表 [参考 TgForm]
  ref-dialog
*/
import { Component, Prop } from 'vue-property-decorator'
import TgForm from './TgForm'
import { ComponentModel } from '@TG/interface'
import { isNotEmpty } from '@TG/kit/validate'
import { appModule } from '@TG/store/modules/app'
import ElFormPackage from '../ElPackage/ElFormPackage.vue'
import TgControlBar from '../TgControlBar/index.vue'

@Component({
  name: 'TgFormBasicDialog',
  components: {
    ElFormPackage,
    TgControlBar
  }
})
export default class extends TgForm {
  @Prop({ type: Object }) private dialogCM!: ComponentModel

  private visible: boolean = false

  get dialogProps() {
    return Object.assign(
      {
        width: '75%',
        top: '100px',
        'close-on-click-modal': false,
        'append-to-body': true
      },
      this.dialogCM?.props
    )
  }

  get dialogEvents() {
    // return Object.assign({ closed: () => this.model = this.getModel() }, this.dialogCM?.events)
    return this.dialogCM?.events
  }

  get scrollbarStyle() {
    let maxHeight: number = this.maxHeight
    if (this.maxHeight === -1) {
      maxHeight = appModule.pageSize.height
      maxHeight -= 100 // top 100
      maxHeight -= 100 // bottom 100
    }
    maxHeight -= 54 // header 54
    maxHeight -= 60 // bodypadding 60
    maxHeight -= 17 // bodymargin 17
    if (this.hasControlBar) {
      maxHeight -= 58 // footer 58
    }
    if (this.holdHeight) {
      return { height: `${maxHeight}px` }
    } else {
      return { 'max-height': `${maxHeight}px` }
    }
  }

  public showDialog() {
    this.visible = true
    this.clearValidate()
  }

  public hideDialog() {
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  margin-bottom: 17px;
  ::v-deep {
    .el-scrollbar__wrap {
      height: 100%;
      overflow-x: hidden;
    }
    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }
}
</style>
